
import React, { Component } from 'react'
import {Form,Input, Row,Col, Select , Button, List, Avatar,Tag,DatePicker} from "antd"
import { ajax } from '../../api';
import {observer} from "mobx-react"
import mobxdata from "../../mobx/data"
import { baseURL } from '../../api/ajax';
import moment from "moment"
import {Link} from "react-router-dom"
import { annoTypeList } from '../../utils';
const {Option} = Select 
const {RangePicker} = DatePicker

@observer
 class NoticeList extends Component {

    componentDidMount(){
        ajax.findnoticelist()
        .then(res=>{
            if(res.code==200){
                mobxdata.getNoticeList(res.result)
            }
        })
    }
    delAnnoOne=(l)=>{
        ajax.delnotice({
            _id:l._id
        })
        .then(res=>{
            if(res.code==200){
                var newlist = mobxdata.noticeList.filter(item=>item._id!=l._id)
                mobxdata.getNoticeList(newlist)
            }
        })
    }
    resetSearchForm=()=>{
        this.searchFrom.resetFields()
    }
    startSearchData=(value)=>{
        console.log(value)
        ajax.findnoticelist(value)
        .then(res=>{
            if(res.code==200){
                mobxdata.getNoticeList(res.result)
            }
        })
    }
    render() {
        const {
            noticeList,
            userinfo
        } = mobxdata
        return (
            <div>
                {userinfo.role>=3&&
                <Button style={{marginBottom:'10px'}} type="danger"  onClick={()=>this.props.history.push('/main/notice/create')} >新增通知</Button>}
                <Form 
                    ref={el=>this.searchFrom=el}
                    onFinish={this.startSearchData}
                >
                    <Row>
                        <Col span={8} >
                            <Form.Item
                                label="通告作者"
                                name="author"
                                
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8} offset={4}>
                            <Form.Item
                                label="发布时间"
                                name="time"   
                            >
                                <RangePicker />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8} >
                            <Form.Item
                                label="通告分类"
                                name="category"
                            >   
                                <Select
                                    placeholder="请选择"
                                    onChange={this.onGenderChange}
                                    allowClear
                                    >
                                    {
                                        annoTypeList.map((l,i)=>{
                                            return (
                                                <Option value={l.type} key={i}>
                                                    {l.title}
                                                </Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8} offset={4}>
                            <Form.Item >   
                                <Button type="primary"  htmlType="submit"  >搜索</Button>
                                <Button type="" style={{margin:'0 8px'}} onClick={this.resetSearchForm}>重置</Button>
                                
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

                <div style={{margin:"10px 0 "}}>
                    <List dataSource={noticeList}
                        renderItem={
                            (l,i)=>(
                                <List.Item 
                                    key={i}
                                    extra={
                                        userinfo.role > 1 && <Button onClick={()=>this.delAnnoOne(l)} type="danger" size="small" style={{margin:"0 6px"}}> 删除</Button>
                                      }
                                >

                                    <List.Item.Meta
                                        avatar={
                                            l.avatar?<Avatar src={l.avatar.replace(/public/,baseURL)} />
                                            :
                                            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                        }
                                        title={<Link to={"/main/notice/update/"+l._id}  >{l.title}  -  { moment(l.time).format('YYYY-MM-DD HH:MM:SS')}   
                                                <Tag  style={{margin:"0 5px"}} color={  annoTypeList.find(item=>item.type==l.category * 1).color }> {annoTypeList.find(item=>item.type==l.category * 1).title }  </Tag>
                                         </Link>}
                                        description={l.author}
                                        />
                                    <div>
                                        {l.content}
                                    </div>
                                </List.Item>
                            )
                        }
                    >

                    </List>
                </div>
            </div>
        )
    }
}


export default NoticeList